<template>
  <div class="main">
    <!-- 头部搜索 -->
    <NavBar @sonSearch="handleTopSearch" />

    <!-- 轮播图 -->
    <div>
      <van-swipe
        class="my-swipe"
        style="height: 150px"
        :autoplay="3000"
        indicator-color="white"
      >
        <van-swipe-item v-for="(item, index) in bannerList" :key="index">
          <img class="img_swipe" :src="item"
        /></van-swipe-item>
      </van-swipe>
    </div>

    <!-- notify 提示框 -->
    <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o"
      >无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他</van-notice-bar
    >
    <!-- 商品展示 -->
    <div class="spot_container">
      <p class="title">商品列表</p>
      <van-skeleton title avatar active :row="10" v-if="spots.length <= 0" />
      <ul class="spot_list" v-else>
        <li
          class="item"
          v-for="item in spots"
          :key="item.id"
          @click="handlePushDetailView(item.id)"
        >
          <img :src="item.accommodationImg" />
          <div class="right">
            <p class="name">{{ item.title }}</p>
            <p>价格：{{ item.price }}</p>
          </div>
        </li>
      </ul>
    </div>

    <!-- 瀑布流加载 -->
    <van-list
      class="content"
      v-model:loading="loading"
      :finished="finished"
      @load="onLoad"
      :immediate-check="false"
      offset="20"
    >
    </van-list>

    <!-- 尾部标签  TODO 没作用了 帮我改一下 他不显示l -->
    <TabBar class="taber" />
  </div>
</template>

<script lang="ts">
//components
import TabBar from "@/components/TabBar.vue";
import NavBar from "@/components/NavBar.vue";

//interface
import { LoginUser, userInfo } from "../entity/user";
import { spot } from "@/entity/spot";

//api
import { getUserInfo } from "../api/user";
import { getBannerList, getSpotsList } from "../api//spot";

import { Options, Vue } from "vue-class-component";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { PageParam } from "@/entity/PageParams";

@Options({
  components: {
    TabBar,
    NavBar,
  },
})
export default class HomeView extends Vue {
  store = useStore();
  router = useRouter();

  //用于每次初始化用户数据

  public mounted(): void {
    getUserInfo().then((response) => {
      this.getBannerList();
      const user: userInfo = response.data;
      // console.log(user.userBasicInfo.username);

      this.store.commit("userInfo/setUserInfo", user);
      localStorage.setItem("ws-name", user.userBasicInfo.username);
      this.getSpotsList();
    });
  }

  //头部============》

  // 获取子组件传入的input值
  condition: spot = {};
  handleTopSearch = (value: string): void => {
    this.finished = false;
    this.pageParams.currentPage = 1;
    if (value == null) {
      this.condition = {};
    } else {
      this.condition.title = value;
      this.pageParams.currentPage = 1;
    }
    this.getSpotsList();
  };

  //轮播+商品============》
  //获取轮播图List
  bannerList: string[] = [];
  getBannerList = async () => {
    let banners = await getBannerList();
    setTimeout(() => {
      this.bannerList = banners.data.bannerList;
      // console.log(this.bannerList);
    }, 1000);
  };

  //获取详细信息 需要的参数
  spots: spot[] = [];
  pageParams: PageParam = {
    currentPage: 1,
    pageSize: 6,
  };

  //第一次mount查询
  getSpotsList = async () => {
    this.handleSearch(false);
  };

  //第二次查询 监听load方法自动加载
  loading: boolean = false;
  finished: boolean = false;
  onLoad = (): void => {
    // console.log("123");

    this.pageParams.currentPage += 1;
    this.loading = true;
    this.handleSearch(true);
  };

  // 真正查询的js代码块
  public handleSearch = async (flag: boolean) => {
    let spotsData = await getSpotsList(
      this.pageParams.currentPage,
      this.pageParams.pageSize,
      this.condition
    );
    if (flag) {
      // console.log("调用load方法");

      this.spots = [...this.spots, ...spotsData.data.pageResult.items];
      // console.log("loading", this.spots.length);
    } else {
      this.spots = spotsData.data.pageResult.items;
      // console.log("first", this.spots.length);
    }
    if (spotsData.data.pageResult.total <= this.spots.length) {
      // console.log("over", this.spots.length);

      this.finished = true;
    }
    this.loading = false;
  };

  //底部============》
  // 跳转详情
  handlePushDetailView = (id: number | undefined) => {
    this.router.push({
      name: "detail",
      query: {
        id,
      },
    });
  };
}
</script>

<style lang="less" scoped>
.main {
  // height: 1200px;
  padding-bottom: 160px;
}

.swip-div {
  min-height: 320px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  .img_swipe {
    width: 100%;
    height: 100%;
  }
}
:deep .van-notice-bar {
  margin-top: 4px;
  height: 40px;
  font-size: 30px;
}
.spot_container {
  padding-bottom: 0;
  margin-bottom: 0;
  .title {
    margin-left: 10px;
    padding: 8px;
    font-size: 16px;
    font-weight: bold;
  }
  .spot_list {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    justify-content: space-around;
    li {
      display: flex;
      margin-bottom: 28px;
      width: 47%;
      height: 260px;
      background-color: aliceblue;
      // justify-content: center;
      align-items: center;
      img {
        border-radius: 20%;
        margin-left: 8px;
        width: 170px;
        height: 140px;
      }
      .right {
        margin-left: 10px;
        text-align: center;
        .name {
          overflow: hidden; //多出的隐藏
          text-overflow: ellipsis; //多出部分用...代替
          display: -webkit-box; //定义为盒子模型显示
          -webkit-line-clamp: 2; //用来限制在一个块元素显示的文本的行数
          -webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
        }
      }
    }
  }
}
</style>